<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线考试系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.4.3/css/layui.min.css" media="all"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/toastr.js/1.3.1/css/toastr.min.css" media="all"/>
    <style>
        html, body {
            height: 100%;
            width: 100%;
        }
        body {
            background-image: url("img/login.jpg");
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .pane {
            background-color: #fff;
            border-radius: 10px;
            padding: 20px;
        }
        </style>
    <script src="js/js.cookie.min.js"></script>

</head>
<body>
<div class="pane">
    <form class="layui-form layui-form-pane" action="#" id="form">
        <div class="layui-form-item" style="text-align: center">
          <h5>在线考试系统</h5>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账户名</label>
            <div class="layui-input-inline">
                <input type="text" name="userId" id="userName" lay-verify="required" placeholder="账号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type= "password" name="password" id="password" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-bottom: 20px;">
                <input type="radio" id="teacher" name="userType" value="0" title="教师" checked="">

                <input type="radio" id="student" name="userType" value="1" title="学生">
        </div>
        <div class="layui-form-item" >

            <input type="checkbox" name="remember" id="remember" lay-skin="switch">
            <label class="label">记住我</label>
        </div>
        <div class="layui-form-item">
            <div style="width: 300px; margin: 0;">
                <button type="submit" class="layui-btn layui-btn-fluid">登录</button>
            </div>
        </div>
    </form>
</div>

<script src="https://cdn.staticfile.org/layui/2.4.3/layui.all.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js"></script>
<script src="js/Util.js"></script>
<script src="js/js.cookie.min.js"></script>
<script src="https://cdn.staticfile.org/toastr.js/1.3.1/js/toastr.min.js"></script>
<script type="text/javascript">
    /*函数功能：表单提交错误时摇晃动画*/
    function shakeform(){
        $("#form").removeClass('shake_effect');
        setTimeout(function()
        {
            $("#form").addClass('shake_effect')
        },1);
    }
    function checkForm() {
        var userName = document.getElementById("userName").value;
        var password = document.getElementById("password").value;
        var userTypes = document.getElementsByName("userType");
        var userType = null;
        for(var i=0;i<userTypes.length;i++) {
            if(userTypes[i].checked) {
                userType=userTypes[i].value;
                break;
            }
        }
        if (userName == null || userName == "") {
            document.getElementById("error").innerHTML = "用户名不能为空";
            $("#userName").val("");
            $("#password").val("");
            shakeform();
            return false;
        }
        if (password == null || password == "") {
            document.getElementById("error").innerHTML = "密码不能为空";
            $("#userName").val("");
            $("#password").val("");
            shakeform();
            return false;
        }
        if (userType == null || userType == "") {
            document.getElementById("error").innerHTML = "请选择用户类型";
            shakeform();
            return false;
        }
        return true;
    }
/**

  */



    $(function () {
        /**
         * toastr配置
         */
        toastr.options = { // toastr配置
            "closeButton": true, //是否显示关闭按钮
            "debug": false, //是否使用debug模式
            "progressBar": true, //是否显示进度条，当为false时候不显示；当为true时候，显示进度条，当进度条缩短到0时候，消息通知弹窗消失
            "positionClass": "toast-top-full-width",//显示的动画位置
            "showDuration": "400", //显示的动画时间
            "hideDuration": "1000", //消失的动画时间
            "timeOut": "5000", //展现时间
            "extendedTimeOut": "1000", //加长展示时间
            "showEasing": "swing", //显示时的动画缓冲方式
            "hideEasing": "linear", //消失时的动画缓冲方式
            "showMethod": "fadeIn", //显示时的动画方式
            "hideMethod": "fadeOut" //消失时的动画方式
        }


        /*判断是否自动登录*/
        if (Cookies.get('roleType')=="0") {
            var teacherId = JSON.parse(Cookies.get('obj')).t;
            // console.log(JSON.parse(Cookies.get('obj')));
            var data = {
                "roleType": Cookies.get('roleType'),
                "userId": teacherId
            };
            $.sendAjax("http://localhost:8080/onlineTest/LoginController/isLogin",data).then(function (msg) {
                if (msg.status==200) {
                    window.location.href="index.html";
                }
            });
        }
        else if(Cookies.get('roleType')=="1") {
            var studentId = JSON.parse(Cookies.get('obj')).s;
            var data = {
                "roleType": Cookies.get('roleType'),
                "userId": studentId
            };
            $.sendAjax("http://localhost:8080/onlineTest/LoginController/isLogin",data).then(function (msg) {
                if (msg.status==200) {
                    window.location.href="index.html";
                }
            });
        }
        $("#form").submit(function (e) {
            e.preventDefault();
            if(checkForm()) {
                var url = "http://localhost:8080/onlineTest/LoginController/login";
                $("#form").attr("action", url);
                $.sendAjax(url, $("#form").serialize()).then(function (data) {
                    if (data.status) {
                        if ($("#remember").is(":checked")) {
                            Cookies.set("roleType", data.roleType);
                            Cookies.set("obj", data.obj);
                        } else {
                            $.setCookies("roleType", data.roleType, 60 * 5);
                            $.setCookies("obj", data.obj, 60 * 5);
                            let date = new Date();
                            $.setCookies("loginTime", date, 60 * 5);
                        }
                        window.location.href = "index.html";
                    } else {
                        shakeform();
                        $("#error").html(data.msg);
                        $("#userName").val("");
                        $("#password").val("");
                        toastr.warning("登陆失败，" + data.msg + "！");
                    }
                });
            }
        });
        })








</script>
</body>
</html>